<template>
  <div class="process_content container-content">
    <div class="app-view-box">
      <el-row>
        <el-col :span="24">
          <h1 class="panel-title">流程管理</h1>
        </el-col>
      </el-row>
      <el-divider class="divider"></el-divider>
      <el-row justify="start" type="flex">
        <el-col :span="6">
          <el-dropdown @command="selectModel" trigger="click" size="mini">
            <el-button @click="handleSelectModel" type="primary" size="mini">
              {{ modelGroupName
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, index) in groupList"
                :key="index"
                :command="item"
              >
                <div class="dropdown_item">
                  <div>{{ item.groupName }}</div>
                  <div @click.stop="deleteModelGroupApi(item.id)">
                    <i
                      v-if="item.id || item.createTime"
                      class="el-icon-delete"
                    ></i>
                  </div>
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <el-col :span="6" style="margin-right: 10px">
          <el-button
            @click="addGroupDialogVisible = true"
            type="primary"
            size="mini"
            icon="el-icon-plus"
            >新增分组
          </el-button>
          <el-button
            @click="createWorkFlow"
            icon="el-icon-plus"
            size="mini"
            type="primary"
            >新增流程
          </el-button>
        </el-col>

        <!-- <el-col :span="6" style="display: flex">
                    <el-input sise="mini" v-model="search_value"></el-input>
                    <el-button
                        @click="search"
                        placeholder="请输入搜索名称"
                        type="primary"
                        size="mini"
                        >搜索
                    </el-button>
                </el-col> -->
      </el-row>
      <div class="process_table">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column align="center" type="index" width="50" label="序号">
          </el-table-column>
          <el-table-column prop="name" label="流程名称"></el-table-column>
          <el-table-column prop="groupName" label="流程类别"></el-table-column>
          <el-table-column prop="version" label="流程版本">
            <template slot-scope="scope">
              <el-tag size="small">v{{ scope.row.version }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column align="center" prop="stateName" label="状态">
            <template slot-scope="scope">
              <el-tag
                :style="{
                  color: scope.row.state === 2 ? '#e6a23c' : '#67c23a',
                }"
              >
                {{ scope.row.stateName + "中" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                class="process_table_btn"
                @click="previewProcess(scope.row)"
                type="text"
                size="small"
                >查看
              </el-button>
              <el-button
                class="process_table_btn"
                @click="handleOpen(scope.row, scope.$index)"
                :style="{
                  color: scope.row.state === 1 ? '#e6a23c' : '#67c23a',
                }"
                type="text"
                size="small"
                >{{ scope.row.state === 1 ? "停用" : "激活" }}
              </el-button>
              <el-button
                class="process_table_btn"
                @click="handleDelete(scope.row, scope.$index)"
                type="text"
                style="color: #f56c6c"
                size="small"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-pagination
      class="table-pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 新增流程模型分组弹窗 -->
    <el-dialog
      title="新增流程模型分组"
      :visible.sync="addGroupDialogVisible"
      width="30%"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        label-position="top"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item label="请输入流程分组名称" prop="addModelGroupName">
          <el-input v-model="ruleForm.addModelGroupName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addGroupDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addWorkFlowGroup">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 流程预览 -->
    <el-dialog title="流程预览" :visible.sync="previewShow" width="60%">
      <processDesign :previewConfig="previewConfig" />
      <!-- <span slot="footer" class="dialog-footer">
              <el-button @click="previewShow = false">取 消</el-button>
              <el-button type="primary" @click="previewShow = false">确 定</el-button>
            </span> -->
    </el-dialog>
  </div>
</template>

<script>
import {
  getProcessList,
  deleteProcess,
  updateProcessState,
  getModelGroupList,
  addModelGroup,
  deleteModelGroup,
} from "@/api/model/index";
import processDesign from "./workflow/processDesign";

export default {
  data() {
    return {
      search_value: "", //搜索值
      showSearch: true,
      currentPage: 1, //当前页
      pageSize: 10, //每页条数
      total: 0,
      tableData: [],
      groupList: [{ groupName: "全部" }],
      modelGroupName: "全部",
      previewShow: false,
      previewConfig: null,
      ruleForm: {
        addModelGroupName: "",
      },
      addGroupDialogVisible: false,
      rules: {
        addModelGroupName: [
          {
            required: true,
            message: "请输入流程分组名称",
            trigger: "blur",
          },
        ],
      },
    };
  },
  components: { processDesign },
  mounted() {
    this.getProcessListApi();
  },
  methods: {
    //获取流程列表
    getProcessListApi(groupName = "") {
      const params = {
        code: "",
        groupName,
        id: "",
        limit: this.pageSize,
        name: this.search_value,
        page: this.currentPage,
      };
      getProcessList(params)
        .then((res) => {
          if (res.code === 200) {
            const { data } = res;
            this.total = data.total;
            this.tableData = data.records;
            this.pageSize = data.size;
          }
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: "获取流程列表失败!" + err,
          });
        });
    },
    //创建流程
    createWorkFlow() {
      this.$router.push({
        path: "/system/workflow",
      });
    },
    //删除流程
    deleteProcessApi(id, index) {
      deleteProcess(id)
        .then((res) => {
          if (res.code === 200) {
            this.getProcessListApi();
            // this.tableData.splice(index, 1);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: "删除失败!" + err,
          });
        });
    },
    //启用停用
    handleOpen(row) {
      this.$confirm("此操作将更改该流程的状态，是否继续?", "更改状态", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.updateProcessStateApi(row);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消更改",
          });
        });
    },
    //改变流程状态
    updateProcessStateApi(params) {
      const state = params.state === 2 ? 1 : 2;
      let data = {
        id: params.id,
        processDefId: params.processDefId,
        state,
      };
      updateProcessState(data)
        .then((res) => {
          if (res.code === 200) {
            this.getProcessListApi();
            this.$message({
              type: "success",
              message: "状态更新成功!",
            });
          }
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: "状态更新失败!" + err,
          });
        });
    },
    //分页器size
    handleSizeChange(val) {
      this.pageSize = val;
      this.getProcessListApi();
    },
    //分页器当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getProcessListApi();
    },

    //删除流程
    handleDelete(row, index) {
      this.$confirm("此操作将永久删除该流程, 是否继续?", "删除流程", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteProcessApi(row.id, index);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //发起流程
    previewProcess(row) {
      this.previewShow = true;
      this.previewConfig = JSON.parse(row.modelData);
    },
    //获取分组列表
    getModelGroupListApi() {
      getModelGroupList().then((res) => {
        if (res.code === 200) {
          this.groupList = [{ groupName: "全部" }, ...res.rows];
        }
      });
    },
    //点击选择分组，获取分组列表
    handleSelectModel() {
      this.getModelGroupListApi();
    },
    //选择分组
    selectModel(item) {
      if (this.modelGroupName === item.groupName) {
        return;
      }
      const groupName = item.groupName === "全部" ? "" : item.groupName;
      this.modelGroupName = item.groupName;
      this.getProcessListApi(groupName);
    },
    //新增流程模型分组
    addWorkFlowGroup() {
      this.$refs["ruleForm"].validate((valid) => {
        console.log("valid", valid);

        if (valid) {
          const params = {
            changeTime: "",
            createTime: Date.now(),
            groupName: this.ruleForm.addModelGroupName,
            id: "",

            sort: 0,
            userId: "",
          };
          addModelGroup(params).then((res) => {
            if (res.code === 200) {
              this.addGroupDialogVisible = false;
              this.$message({
                message: "新增成功",
                type: "success",
              });
            }
          });
        }
      });
    },
    //删除流程分组
    deleteModelGroupApi(id) {
      this.$confirm("此操作将永久删除该分组, 是否继续?", "删除分组", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await deleteModelGroup(id);
          if (res.code === 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    searchProcess() {
      this.getProcessListApi();
    },
  },
};
</script>

<style lang="scss" scoped>
.process_content {
  width: 100%;

  .process_title {
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .process_title_left {
      display: flex;
      align-items: center;
    }

    .process_title_right {
      .add_btn {
        width: 100px;
      }
    }
  }

  .process_table {
    margin-top: 10px;
  }
}

.process_table_btn {
  font-weight: bold;
}

.dropdown_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-icon-delete:hover {
  color: red;
}
</style>
